/* eslint-disable react/jsx-pascal-case */
import { RootDispatch ,RootState,DataItem} from '@/utils'
import React ,{useEffect,FC,useState} from 'react'
import {useDispatch,useSelector} from "react-redux"
import * as api from "../../api/index"
import { Sidebar } from 'react-vant';

import My_content from "../../components/My_content"

type Props = {}

const Classify:FC<Props> = ({}) =>{
  const dispatch:RootDispatch = useDispatch()
  const [active, setActive] = useState(0);
  // 取仓库数据
  const data = useSelector((state:RootState)=>state.data)
  const children_data = useSelector((state:RootState)=>state.children_data)
  useEffect(()=>{
    // 派发请求方法
    dispatch(api.get_list())
  },[dispatch])

  console.log(data);

  return (
    <div>
      <Sidebar
        value={active}
        onChange={(v:number) => {
          setActive(v);
          dispatch(api.check_children_Data(v))
        }}
      >
        {
          data.map((item:DataItem, index:number) => (
            <Sidebar.Item key={index} title={item.title}>
                <My_content children_data={children_data} active={active}/>
            </Sidebar.Item>
          ))
        }
      </Sidebar>
    </div>
  )
}

export default Classify